import classnames from "classnames";

import Icon from "@/components/Icon";
import styles from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/types/store";
import { useState } from "react";
import { Channel } from "@/types/data";
import { addChannel, delChannel, getAllChannel } from "@/store/actions/home";
import { useInitialState } from "@/utils/use-initial-state";
type Props = {
    onClose: () => void;
};
const Channels = ({ onClose }: Props) => {
    // 获得用户频道
    const { userChannel } = useSelector((state: RootState) => state.home);
    // 获得推荐频道
    const { restChannel } = useInitialState(getAllChannel, "home");
    // 切换频道编辑状态
    const [isEdit, setIsEdit] = useState(false);
    const onChangeEdit = () => {
        setIsEdit(!isEdit);
    };
    // 获得高亮
    const { channelActiveKey } = useSelector((state: RootState) => state.home);
    // 切换高亮
    const dispatch = useDispatch();
    const changeTab = (key: string) => {
        if (!isEdit) {
            dispatch({ type: "home/changeTab", payload: key });
            onClose();
            return;
        }
    };
    // 删除频道
    const onDelChannel = (channel: Channel) => {
        if (channel.id === 0) return;
        if (userChannel.length <= 4) return;
        dispatch(delChannel(channel));
    };
    // 添加频道
    const onAddChannel = (channel: Channel) => {
        dispatch(addChannel(channel));
    };
    return (
        <div className={styles.root}>
            <div className="channel-header">
                <Icon type="iconbtn_channel_close" onClick={onClose} />
            </div>
            <div className="channel-content">
                {/* 编辑时，添加类名 edit */}
                <div className={classnames("channel-item", isEdit && "edit")}>
                    <div className="channel-item-header">
                        <span className="channel-item-title">我的频道</span>
                        <span className="channel-item-title-extra">
                            点击进入频道
                        </span>
                        <span
                            className="channel-item-edit"
                            onClick={onChangeEdit}>
                            {isEdit ? "保存" : "编辑"}
                        </span>
                    </div>
                    <div className="channel-list">
                        {/* 选中时，添加类名 selected */}
                        {userChannel.map((item) => (
                            <span
                                onClick={() => changeTab(item.id + "")}
                                key={item.id}
                                className={classnames(
                                    "channel-list-item",
                                    channelActiveKey === item.id + "" &&
                                        "selected"
                                )}>
                                {item.name}
                                <Icon
                                    type="iconbtn_tag_close"
                                    onClick={() => onDelChannel(item)}
                                />
                            </span>
                        ))}
                    </div>
                </div>

                <div className="channel-item">
                    <div className="channel-item-header">
                        <span className="channel-item-title">频道推荐</span>
                        <span className="channel-item-title-extra">
                            点击添加频道
                        </span>
                    </div>
                    <div className="channel-list">
                        {restChannel.map((item, index) => (
                            <span
                                key={item.id}
                                onClick={() => onAddChannel(item)}
                                className="channel-list-item">
                                + {item.name}
                            </span>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Channels;
